<template>
  <a-modal
    :title="editBoxState ? '编辑分类' : '新增分类'"
    :visible.sync="visible"
    @ok="handleSubmit"
    @cancel="handleCancel(false)"
  >
    <a-form :form="form">
      <a-form-item
        label="名称"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 19 }"
      >
        <a-input
          v-decorator="[
            'title',
            {
              initialValue: initInfo.title,
              rules: [
                { required: true, message: '请输入名称！' },
                {
                  validator: $validate.validateLength,
                  max: 4,
                  min: 1
                }
              ]
            }
          ]"
        />
      </a-form-item>
      <a-form-item
        label="描述"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 19 }"
      >
        <a-textarea
          placeholder=""
          :rows="3"
          v-decorator="[
            'info',
            {
              initialValue: initInfo.info
            }
          ]"
        />
      </a-form-item>
      <a-form-item
        label="状态"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 19 }"
      >
        <a-select
          v-decorator="[
            'status',
            {
              initialValue: initInfo.status,
              rules: [{ required: true, message: '必选项' }]
            }
          ]"
        >
          <a-select-option value="1">
            启用
          </a-select-option>
          <a-select-option value="2">
            停用
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
export default {
  name: "add",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    editBoxState: {
      type: Number, //编辑弹出框状态，0为新增框，1为编辑框
      default: 0
    },
    editInfo: {
      type: Object
    }
  },
  data() {
    this.handleSubmit = this.$debounce(this.handleSubmit, 800);
    return {
      formLayout: "horizontal",
      form: this.$form.createForm(this),
      initInfo: {}
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          let obj = JSON.parse(JSON.stringify(values));
          let api = null;
          if (this.editBoxState === 0) {
            obj.type = 1;
            api = this.$api.addInfoClass;
          } else {
            api = this.$api.editInfoClass;
            obj.id = this.initInfo.id;
            obj.type = 2;
          }
          this.$ajax
            .post(api, obj)
            .then(() => {
              this.$notification.success({
                message: "操作成功"
              });
              this.handleCancel(true);
            })
            .catch(err => {
              this.$notification.error({
                message: err
              });
            });
        }
      });
    },
    handleCancel(isFresh) {
      this.form.resetFields();
      this.$emit("handleCancel", isFresh);
    }
  },
  watch: {
    editInfo: {
      handler: function(val) {
        this.initInfo = JSON.parse(JSON.stringify(val));
      },
      deep: true
    }
  }
};
</script>

<style scoped></style>
